1
00:00:00,500 --> 00:00:01,190
Okay.

2
00:00:01,190 --> 00:00:07,760
In this lecture, we're going to learn about the difference between scale and offset and how that can

3
00:00:07,760 --> 00:00:11,360
relate to the anchor point of a gooey object.

4
00:00:11,360 --> 00:00:18,590
The size and the position properties of a gooey object store something called a Udim two.

5
00:00:19,010 --> 00:00:24,710
In the Roblox documentation, it states that the Udim two is a data type representing a two dimensional

6
00:00:24,710 --> 00:00:29,900
value, where each dimension is composed of a relative scale and an absolute offset.

7
00:00:29,900 --> 00:00:34,730
It is the combination of two udims representing the x and y dimensions.

8
00:00:34,730 --> 00:00:41,540
The most common usages of udim two objects are setting the size and position of GUI objects, so it

9
00:00:41,540 --> 00:00:45,440
stores a offset and it stores a scale.

10
00:00:45,440 --> 00:00:53,330
The scale basically represents the percentage on either the y or x axis for a particular GUI object.

11
00:00:53,330 --> 00:01:01,610
For example, if you had a size on the x axis with a scale of 0.5, then the size of that object would

12
00:01:01,610 --> 00:01:05,210
take up half of its parent on the x axis.

13
00:01:05,210 --> 00:01:13,070
So if that guy object was a child of a screen GUI, then that means with a scale of 0.5 on the x axis,

14
00:01:13,100 --> 00:01:17,300
it would take up half of the screen on the x axis.

15
00:01:17,300 --> 00:01:22,460
Now offset represents an absolute size that is based in pixels.

16
00:01:22,460 --> 00:01:27,590
This can be useful to define a constant offset between elements in your GUIs.

17
00:01:28,300 --> 00:01:34,960
Currently with my guy, you can see that the positioning of my guy is being set in scale, while the

18
00:01:34,960 --> 00:01:37,840
size of my guy is being set in offset.

19
00:01:37,840 --> 00:01:43,270
So currently the size of this element will always be 100 by 100 pixels.

20
00:01:43,270 --> 00:01:49,840
No matter how much I scale my screen or shrink my screen, it's always going to remain with a constant

21
00:01:49,840 --> 00:01:52,180
size of 100 pixels.

22
00:01:52,570 --> 00:01:59,650
Now, if I would like my guy to scale with my screen, then I could go ahead and set the offset to zero.

23
00:01:59,650 --> 00:02:05,260
And let's say I want the scale, let's say to be a 10th of the screen on the x axis.

24
00:02:05,260 --> 00:02:11,230
And then I want the Y to be, let's say also a 10th based on the y axis.

25
00:02:11,230 --> 00:02:17,260
So now we have this size here that's taken up 10% of the screen on the x axis and 10% of the screen

26
00:02:17,260 --> 00:02:18,490
on the y axis.

27
00:02:18,490 --> 00:02:27,190
And as I continue to scale my screen, you can see that the size of my guy object is going to match

28
00:02:27,190 --> 00:02:28,270
that scale.

29
00:02:28,270 --> 00:02:36,250
So if I shrink down my y axis, you can see that the total height or the y axis of my guy object is

30
00:02:36,250 --> 00:02:42,010
scaling with my screen to always take up 10% of the screen.

31
00:02:42,010 --> 00:02:47,560
So right now the height of my screen is probably only a couple hundred pixels, and the size of my guy

32
00:02:47,560 --> 00:02:53,050
object is always going to take up a 10th of that size on the y axis.

33
00:02:53,530 --> 00:02:56,860
Now the same thing goes with the position of my object.

34
00:02:56,860 --> 00:03:04,090
If I were to set, let's say, the position point one and point one on both the x and y axis, the current

35
00:03:04,090 --> 00:03:11,860
position is going to be 10% of my screen along the x axis and 10% along the y axis.

36
00:03:11,860 --> 00:03:20,260
Now, if I were to resize my screen, you're going to notice that the gap between the top and where

37
00:03:20,260 --> 00:03:24,940
my guy object is at both on the x and the y axis is going to change.

38
00:03:24,940 --> 00:03:31,780
You can see that the gap is decreasing as I make my screen smaller, and you can see those numbers changing.

39
00:03:31,780 --> 00:03:35,680
So as I continue to resize my screen, the gap is getting larger.

40
00:03:35,680 --> 00:03:39,850
And when I make my screen smaller, the gap is getting smaller as well.

41
00:03:40,810 --> 00:03:44,650
Now, this sometimes may not be desired behavior.

42
00:03:44,650 --> 00:03:50,860
You might want to keep a constant gap between a GUI object and a certain edge of the screen, and this

43
00:03:50,860 --> 00:03:53,260
is where you would use offset instead.

44
00:03:53,650 --> 00:03:55,120
If I set the scale to zero.

45
00:03:55,120 --> 00:04:00,820
So that way my GUI object is in the top corner of my screen, and instead I want it to have an offset

46
00:04:00,820 --> 00:04:04,510
of exactly ten pixels on the x and the y axis.

47
00:04:04,540 --> 00:04:11,080
Now, what's going to happen is I'm going to keep this constant ten pixel offset, no matter what the

48
00:04:11,080 --> 00:04:13,210
scaling or the size of my screen is.

49
00:04:13,210 --> 00:04:19,870
So even if I were to resize my screen, we're always going to be keeping that ten pixel gap.

50
00:04:19,900 --> 00:04:21,820
Same thing goes with the y axis.

51
00:04:21,850 --> 00:04:27,280
If I continue to resize, we're going to continue with that ten pixel gap.

52
00:04:27,880 --> 00:04:33,850
Now of course, the position of our GUI object is going to depend on the anchor point.

53
00:04:33,850 --> 00:04:37,990
So if I were to swap the anchor point to be in the opposite corner.

54
00:04:38,200 --> 00:04:43,660
As you can see now, my GUI object is going to be completely cut off the screen because my current position

55
00:04:43,660 --> 00:04:45,550
is ten pixels and ten pixels.

56
00:04:45,550 --> 00:04:50,740
So it's going to move the anchor point ten pixels down and ten pixels over here, which is what the

57
00:04:50,740 --> 00:04:52,150
position of my anchor point is.

58
00:04:52,150 --> 00:04:58,000
And the problem with that is that most of my frame is being cut off on the screen.

59
00:04:58,000 --> 00:05:03,070
So this is the kind of anchor point that you would want to use if you wanted to display your GUI object

60
00:05:03,070 --> 00:05:05,290
in the opposite corner of the screen.

61
00:05:05,290 --> 00:05:10,180
So let's go ahead and adjust the position this time what we're going to do.

62
00:05:11,180 --> 00:05:16,820
Is, since we don't know what the resolution of the screen is for a particular player, it could be

63
00:05:16,820 --> 00:05:18,920
varying across different devices.

64
00:05:18,920 --> 00:05:24,920
We want to set the scale on the x and y axis to one, so that way it's always going to be in the bottom

65
00:05:24,920 --> 00:05:29,600
right corner of our screen when we have the anchor point set to one and one.

66
00:05:29,600 --> 00:05:36,980
Now, if I wanted to create a constant offset between the corner of the screen, then we would use offset.

67
00:05:36,980 --> 00:05:42,860
So let's subtract ten pixels on the x axis and subtract ten pixels on the y axis.

68
00:05:42,860 --> 00:05:49,250
And now we're going to have a consistent ten pixel gap between the x side of our screen and the Y side

69
00:05:49,250 --> 00:05:49,970
of our screen.

70
00:05:49,970 --> 00:05:57,080
And as I continue to resize, as you can see, it's going to maintain that ten pixel gap.

71
00:05:57,650 --> 00:06:04,400
Now, if I would like my frame to be always in the center of my screen no matter what, then we can

72
00:06:04,400 --> 00:06:08,150
set the anchor point to be something like 0.5 by 0.5.

73
00:06:08,150 --> 00:06:12,230
So now you can see that the anchor point of this object is directly in the center.

74
00:06:12,230 --> 00:06:17,690
And then in order to position it at the center of my screen, we can go ahead and set the position to

75
00:06:17,690 --> 00:06:22,850
a scale of 0.5 on the y axis and 0.5 on the x axis.

76
00:06:22,850 --> 00:06:29,750
And now, no matter what my GUI object is going to be in the exact center of my screen, and then it's

77
00:06:29,750 --> 00:06:33,980
going to scale according to wherever my anchor point is.

78
00:06:33,980 --> 00:06:39,620
So because my anchor point is in the center, you can see both the bottom and the top is scaling to

79
00:06:39,620 --> 00:06:41,600
move towards the anchor point.

80
00:06:42,380 --> 00:06:47,510
But let's say I go ahead and move my anchor point to be zero on the y axis.

81
00:06:47,510 --> 00:06:49,130
So now my anchor point is up there.

82
00:06:49,130 --> 00:06:55,910
If I go and resize my object, you can now see that the bottom portion is resizing towards my anchor

83
00:06:55,910 --> 00:06:56,510
point.

84
00:06:57,850 --> 00:07:03,040
So where are your anchor point is positioned is going to heavily depend on what corner of the screen

85
00:07:03,040 --> 00:07:09,220
you're going to be placing your GUI object, and what direction you want your GUI object to scale in

86
00:07:09,220 --> 00:07:14,380
when you are resizing the screen, or when you're on different resolution screens, because every single

87
00:07:14,380 --> 00:07:18,340
device is going to have a different resolution, a different aspect ratio, and you want to be able

88
00:07:18,340 --> 00:07:21,280
to account for that across multiple different devices.

89
00:07:21,640 --> 00:07:26,590
Now, a question I'll get often is should I use scale or should I use offset?

90
00:07:26,590 --> 00:07:28,960
And the answer is it depends.

91
00:07:28,960 --> 00:07:34,210
Most of the time you're probably going to use a combination of scale and offset depending on what you're

92
00:07:34,210 --> 00:07:34,720
doing.

93
00:07:34,720 --> 00:07:40,690
For example, if you need your object to be in the bottom corner with a consistent ten pixel gap, then

94
00:07:40,690 --> 00:07:45,580
you're going to have to use scale and position, and you're also going to have to use offset to subtract

95
00:07:45,580 --> 00:07:47,710
it by a certain amount of pixels.

96
00:07:48,250 --> 00:07:54,550
When it comes to the size of your GUI object, most of the time you'll be using either scale or offset,

97
00:07:54,550 --> 00:08:00,820
but you can sometimes use both scale and offset when you need to account for some things in particular

98
00:08:00,820 --> 00:08:04,960
situations, and you'll see what I mean in future lectures.

99
00:08:04,960 --> 00:08:11,650
So in the next lecture, we're going to take a look at another GUI object called a scrolling frame.

100
00:08:11,650 --> 00:08:13,000
I'll see you there.